<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05jQuery过滤器</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 1、基本过滤器
            // :first 获取第一个元素
            // :last  获取最后个元素
            // :not(selector) 去除所有与给定选择器匹配的元素
            // :even      匹配所有索引值为偶数的元素，从 0 开始计数
            // :odd       匹配所有索引值为奇数的元素，从 0 开始计数
            // :eq(index) 匹配一个给定索引值的元素
            // :gt(index) 匹配所有大于给定索引值的元素
            // :lt(index) 匹配所有小于给定索引值的元素
            // :header    匹配如 h1, h2, h3 之类的标题元素
            // :animated  匹配所有正在执行动画效果的元素

            // console.log($("li:first")[0]);   // <li>list item 1</li>
            // console.log($("li:last")[0]);   // <li>list item 5</li>

            // console.log($("li:odd")[0]);    // <li>list item 2</li>
            // console.log($("li:odd")[1]);    // <li>list item 4</li>
            // console.log($("li:odd")[2]);    // undefined

            // console.log($("li:eq(4)")[0]);    //  <li>list item 5</li>

            // 2、内容过滤器：
            // :contains(text)  匹配包含给定文本的元素
            // :empty           匹配所有不包含子元素或者文本的空元素
            // :parent          匹配含有子元素或者文本的元素
            // :has(selector)   匹配含有选择器所匹配的元素的元素
            // console.log($("div:contains(张三)")[0]);          // <div>张三</div>
            // console.log($("div:empty")[0]);                 // <div></div>
            // console.log($("span:parent")[0]);               // <span>a</span>
            // console.log($("div:has(p)")[0]);                // <div><p>李四</p></div>

            // 3、可见性过滤器：
            // :hidden(text)        匹配所有不可见元素，或者type为hidden的元素
            // :visible             匹配所有的可见元素
            console.log($("input:hidden")[0]);      // <input type="hidden" name="id"/>
            console.log($("input:hidden")[1]);      // <input type="text" name="id2" style="display: none"/>
            console.log($("input:hidden")[2]);      // <input type="text" name="id3" hidden/>
            console.log($("input:hidden")[3]);      // <input type="text" name="id4" hidden="hidden"/>
            console.log($("input:visible")[0]);     // <input type="text" name="id5"/>


        });
    </script>
</head>
<body>
<div>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
</div>

<div>张三</div>
<div><p>李四</p></div>
<div></div>

<span>aaaaaa</span>
<span></span>

<form>
    <input type="hidden" name="id1"/>
    <input type="text" name="id2" style="display: none"/>
    <input type="text" name="id3" hidden/>
    <input type="text" name="id4" hidden="hidden"/>
    <input type="text" name="id5"/>
</form>

</body>
</html>